<template>
   <div>
     <div v-for="r in recommendArray" @click="editrecommendArray(r._id)">
       <el-row>
         <el-col :span="6">
           <img :src="r.url" alt="" style="width: 150px;height:150px">
         </el-col>
         <el-col :span="18">
           <div>
             {{r.title}}
           </div>
           <div>
             {{r.desc}}
           </div>
         </el-col>
       </el-row>
     </div>
     <el-row>
       <el-button @click="addrecommendvisible">添加推荐</el-button>
     </el-row>
     <el-dialog  :visible.sync="recommendvisible" width="80%">
       <el-row>
         <el-col :span="8">
           <el-form ref="recommendform" :model="recommendform" label-width="80px">
             <el-form-item label="图片"  >
               <img :src="recommendform.price" alt="" style="width: 148px;height:148px">
               <el-upload class="upload-demo" action="" list-type = "picture-card" :on-change = "recommendfiles" :file-list="bannerfiles" :limit=1 :auto-upload="false">
                 <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
               </el-upload>
             </el-form-item>
             <el-form-item label="标题">
               <el-input v-model="recommendform.title" style="width: 70%;"></el-input>
             </el-form-item>
             <el-form-item label="描述"  >
               <el-input type="textarea" v-model="recommendform.desc"></el-input>
             </el-form-item>
           </el-form>
           <div class="footer">
             <el-button @click="recommendvisible = false">取 消</el-button>
             <el-button type="primary" @click="addRecommend">确 定</el-button>
           </div>
         </el-col>
         <el-col :span="16">
           <div class="nav-letf">
             <span><el-button type="primary" @click="all" plain>全部</el-button></span>
             <span  v-for="item in typeArray"><el-button type="primary" @click="choosetype(item.type)" plain>{{item.type}}</el-button></span>
           </div>
           <div class="nav-right">
             <el-row>
               <el-col :span="6"><el-input v-model="input" placeholder="请输入内容"></el-input></el-col>
               <el-button icon="el-icon-search" @click="search" circle></el-button>
             </el-row>
             <el-table :data="goodsData" style="width: 100%" v-loading="loading" highlight-current-row  @current-change="getCurrentRow">
               <!--<el-table-column label="" width="50">-->
                 <!--<template scope="scope">-->
                   <!--<el-radio :label="scope.$index" v-model="radio" @change.native="getCurrentRow(scope.$index ,scope.row)">&nbsp;</el-radio>-->
                 <!--</template>-->
               <!--</el-table-column>-->
               <el-table-column type="index"  width="50" label="序号"></el-table-column>
               <el-table-column prop="goodName" label="产品" ></el-table-column>
               <el-table-column prop="goodsfile" label="图片" width="100">
                 <template slot-scope="scope">
                   <img  :src="scope.row.goodsfiles[0]" alt="" style="width: 50px;height: 40px">
                 </template>
               </el-table-column>
               <el-table-column prop="costPrice" label="价钱" ></el-table-column>
             </el-table>
           </div>
           <div class="block">
             <el-pagination background @current-change="handleCurrentChange"  layout="total, prev, pager, next" :total="count"> </el-pagination>
           </div>
         </el-col>
       </el-row>
     </el-dialog>

     <el-dialog  :visible.sync="editrecommendvisible" width="80%">
       <el-row>
         <el-col :span="8">
           <el-form ref="editrecommendform" :model="editrecommendform" label-width="80px">
             <el-form-item label="图片"  >
               <img :src="editrecommendform.price" alt="" style="width: 148px;height:148px">
               <el-upload class="upload-demo" action="" list-type = "picture-card" :on-change = "editrecommendfiles" :file-list="bannerfiles" :limit=1 :auto-upload="false">
                 <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
               </el-upload>
             </el-form-item>
             <el-form-item label="标题">
               <el-input v-model="editrecommendform.title" style="width: 70%;"></el-input>
             </el-form-item>
             <el-form-item label="描述"  >
               <el-input type="textarea" v-model="editrecommendform.desc"></el-input>
             </el-form-item>
           </el-form>
           <div class="footer">
             <el-button @click="editrecommendvisible = false">取 消</el-button>
             <el-button type="primary" @click="editRecommend">确 定</el-button>
             <el-button type="danger" @click="edlRecommend">删除</el-button>
           </div>
         </el-col>
         <el-col :span="16">
           <div class="nav-letf">
             <span><el-button type="primary" @click="all" plain>全部</el-button></span>
             <span  v-for="item in typeArray"><el-button type="primary" @click="choosetype(item.type)" plain>{{item.type}}</el-button></span>
           </div>
           <div class="nav-right">
             <el-row>
               <el-col :span="6"><el-input v-model="input" placeholder="请输入内容"></el-input></el-col>
               <el-button icon="el-icon-search" @click="search" circle></el-button>
             </el-row>
             <el-table :data="goodsData" style="width: 100%" v-loading="loading" highlight-current-row  @current-change="getCurrentRow">
               <!--<el-table-column label="" width="50">-->
                 <!--<template scope="scope">-->
                   <!--<el-radio :label="scope.$index" v-model="radio" @change.native="getCurrentRow(scope.$index ,scope.row)">&nbsp;</el-radio>-->
                 <!--</template>-->
               <!--</el-table-column>-->
               <el-table-column type="index"  width="50" label="序号"></el-table-column>
               <el-table-column prop="goodName" label="产品" ></el-table-column>
               <el-table-column prop="goodsfile" label="图片" width="100">
                 <template slot-scope="scope">
                   <img  :src="scope.row.goodsfiles[0]" alt="" style="width: 50px;height: 40px">
                 </template>
               </el-table-column>
               <el-table-column prop="costPrice" label="价钱" ></el-table-column>
             </el-table>
           </div>
           <div class="block">
             <el-pagination background @current-change="handleCurrentChange"  layout="total, prev, pager, next" :total="count"> </el-pagination>
           </div>
         </el-col>
       </el-row>
     </el-dialog>
   </div>
</template>

<script>
    import axios from "axios"

    export default {
        data() {
            return {
                bannerfiles:[],
                recommendvisible:false,
                recommendform:{
                  price:"",
                  title:"",
                  desc:""
                },
                recommendArray:[],
                editrecommendvisible:false,
                editrecommendform:{
                  price:"",
                  title:"",
                  desc:"",
                  goodsId:""
                },
                editrecommendid:"",

                typeArray:[],
                goodsData:[],
                input:"",
                loading: true,
                type:"",
                page:1,
                count:0,
                radio:"",
                chooseGoods:{},
            }
        },
        mounted(){
            this.getRecommend()
        },
        methods: {
            getGoods(){
              let  param ={
                page:this.page,
                pageSize:10,
                type:this.type,
                shelves:true
              }
              axios.get("/goodslist/getShelvesGoods",{
                params:param
              }).then((response)=>{
                let res = response.data;
                if (res.status == "0"){
                  this.goodsData = res.result.list;
                  this.count = res.result.count;
                  this.loading = false;
                }
              })
            },
            gettype(){
              axios.get("/typelist/getType").then((response)=>{
                let res = response.data;
                this.typeArray = res.result.list;
              })
            },
            choosetype(type){
              this.type = type;
              this.getGoods();
            },
            all(){
              this.type = "";
              this.getGoods();
            },
            search(){
              axios.post("/goodslist/getOneShelvesGoods",{
                goodName:this.input
              }).then((response)=>{
                let res = response.data;
                this.goodsData = res.result.list;
              })
            },
            open2() {
              this.$confirm('请选择关联的商品，然后提交', '提示', {
                showCancelButton:false,
                type: 'warning'
              })
            },
            getCurrentRow( row){
              console.log( row);
              if(row == null){
                this.chooseGoods = {};
              }else{
                this.chooseGoods = row;
              }
            },
            handleCurrentChange(val) {
              this.page = val;
              this.getGoods()
            },

          getRecommend(){
            axios.get("/recommend/getRecommend").then((response)=>{
              let res = response.data;
              this.recommendArray = res.result.list;
            })
          },

          addrecommendvisible(){
            this.recommendvisible=true;
            this.getGoods();
            this.gettype();
          },

          recommendfiles(file){
            this.recommendform.price = file;
          },
          addRecommend(){
            if(JSON.stringify(this.chooseGoods) == "{}") {
              this.open2();
            }else {
              var from = new FormData();
              from.append('url', this.recommendform.price.raw);
              from.append('title', this.recommendform.title);
              from.append('desc', this.recommendform.desc);
              from.append('goodsId', this.chooseGoods._id);

              let config = {
                headers: {
                  'Content-Type': 'multipart/form-data'
                }
              }

              axios.post("/recommend/addRecommend", from, config).then((ress) => {
                let res = ress.data;
                if (res.status == "0") {
                  this.recommendvisible = false;
                  this.chooseGoods = {};
                  this.recommendform.price = "";
                  this.recommendform.title = "";
                  this.recommendform.desc = "";
                  this.bannerfiles = [];
                  this.getRecommend();
                } else {

                }
              })
            }
          },
          editrecommendfiles(file){
            this.editrecommendform.price = file;
          },
          editrecommendArray(id){
            this.editrecommendid = id;
            this.editrecommendvisible = true;
            this.editrecommendform.price="";
            this.editrecommendform.title="";
            this.editrecommendform.desc ="";
            this.bannerfiles=[];
            this.chooseGoods = {};
            this.getGoods();
            this.gettype();
            let  param ={
              id:id,
            }
            axios.get("/recommend/findRecommend",{
              params:param
            }).then((response)=>{
              let res = response.data;
              if (res.status == "0"){
                this.editrecommendform = {

                  price:res.result.list.url,
                  title:res.result.list.title,
                  desc:res.result.list.desc,
                  goodsId:res.result.list.goodsId,

                }
              }
            })
          },
          editRecommend(){
            var from = new FormData();

            from.append('id', this.editrecommendid);
            from.append('url', this.editrecommendform.price.raw);
            from.append('title', this.editrecommendform.title);
            from.append('desc', this.editrecommendform.desc);
            from.append('goodsId', this.chooseGoods._id);

            let config = {
              headers: {
                'Content-Type': 'multipart/form-data'
              }
            }

            axios.post("/recommend/editRecommend",from ,config).then((ress)=>{
              let res = ress.data;
              if(res.status == "0"){
                this.editrecommendvisible = false;
                this.chooseGoods = {};
                this.getRecommend();
              }else{

              }
            })
          },

          edlRecommend(){
            axios.post("/recommend/delRecommend", {
              id:this.editrecommendid,
            }).then((response) => {
              let res = response.data;
              if (res.status == "0") {
                this.editrecommendvisible = false;
                this.getRecommend();
              }
            })
          },
        }
    }
</script>

<style  lang="scss" scoped>
  .el-tabs{
    margin-top: 20px;
  }
  .nav-letf{
    width: 100px;
    display: inline-block;
    margin-right: 10px;
    margin-top: 10px;
  }
  .nav-right{
    width: calc(100% - 120px);
    display: inline-block;
    vertical-align: top;
  }
  .footer{
    margin-top: 100px;
  }
  .nav-letf .el-button{
    width: 100% ;
    padding: 0;
    height: 40px;
    margin-bottom: 10px;
  }
  .demo-input-suffix{
    margin-bottom: 20px;
  }
  .left-box{
    display: inline-block;
    margin-top: 20px;
  }
  .right-box{
    display: inline-block;
    vertical-align: top;
    margin-top: 20px;
    margin-left: 50px;
  }
  .mlists{
    display: inline-block;
    margin-right: 20px;
  }

</style>

